<template>
    <div class="redPacketListBody wap">
      <div class="redPacketListTop" :class="showMask?'showMaskStyle':''">
        <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}">红包列表
          <a class="headRight" slot="right" @click="goSendPacketPage"><img src="../../../../assets/img/order/redpacket.png" alt=""> 发红包</a>
        </x-header>
        <div @click="showDialog" class="allStatus flex-direction-column display-flex align-items-center justify-content-flex-center">
          <p v-if="selectIndex==99">全部状态  <img src="../../../../assets/img/order/down.png" alt=""></p>
          <p v-if="selectIndex==0">未开始  <img src="../../../../assets/img/order/down.png" alt=""></p>
          <p v-if="selectIndex==1">进行中  <img src="../../../../assets/img/order/down.png" alt=""></p>
          <p v-if="selectIndex==2">已结束  <img src="../../../../assets/img/order/down.png" alt=""></p>
        </div>
        <div class="statusList flex-direction-column display-flex align-items-center justify-content-flex-center" v-show="showMask">
          <p class="statusItem display-flex align-items-center justify-content-flex-justify " @click="closeDialog(0)">
            <span :class="selectIndex==0?'selectText':''">未开始</span>
            <img v-show="selectIndex==0" src="../../../../assets/img/order/select.png" alt="">
          </p>
          <p class="statusItem display-flex align-items-center justify-content-flex-justify " @click="closeDialog(1)">
            <span :class="selectIndex==1?'selectText':''">进行中</span>
            <img v-show="selectIndex==1" src="../../../../assets/img/order/select.png" alt="">
          </p>
          <p class="statusItem display-flex align-items-center justify-content-flex-justify " @click="closeDialog(2)">
            <span :class="selectIndex==2?'selectText':''">已结束</span>
            <img v-show="selectIndex==2" src="../../../../assets/img/order/select.png" alt="">
          </p>
          <p class="statusItem display-flex align-items-center justify-content-flex-justify " @click="closeDialog(99)">
            <span :class="selectIndex==99?'selectText':''">全部状态</span>
            <img v-show="selectIndex==99" src="../../../../assets/img/order/select.png" alt="">
          </p>
        </div>
      </div>
      <div class="main">
        <scroller v-if="dataArr.length>0">
          <ul class="redPacketList flex-direction-column display-flex align-items-center justify-content-flex-center">
            <li v-for="(item,index) in dataArr" :key="index" class="redPacketItem display-flex flex-direction-row">
              <div class="redPacketContent  display-flex flex-direction-column justify-content-flex-center">
                <p>{{item.value}}元红包，满{{item.orderAmount}}元使用</p>
                <span>开始时间：{{item.beginDate}}</span>
                <span>结束时间：{{item.endDate}}</span>
                <!--<span>有效期：{{item.beginDate.split(' ')[0]}} 至 {{item.endDate.split(' ')[0]}}</span>-->
                <span>参与客户：
                <span v-for="(j,jIndex) in item.distributorCategoryVOList" :key="jIndex">{{j.distributorCategoryName}} <span v-if="jIndex!=(item.distributorCategoryVOList.length-1)">、</span></span>
                <span v-for="(z,zIndex) in item.distributorVOList" :key="zIndex">{{z.name}} <span v-if="zIndex!=(item.distributorVOList.length-1)">、</span></span>
              </span>
              </div>
              <p class="statusText" :style="{color:(item.state==1?'#F7BA45':(item.state==0?'#4BC1A1':'#BBBBBB'))}">
                {{item.state==0?'未开始':(item.state==1?'进行中':'已结束')}}
              </p>
            </li>
          </ul>
        </scroller>
        <div v-else class="display-flex flex-direction-row align-items-center justify-content-flex-center">
          <img @click="initData(selectIndex)" style="width: 3rem;margin-top: 2rem" src="../../../../assets/img/customer/data_empty.png" alt="">
        </div>
      </div>

      <div v-show="showMask" @click="showMask=false" class="mask" style="display: block;opacity: 0.5;"></div>
    </div>
</template>

<script>
    export default {
        name: "redPacketList",
      data(){
          return{
            showMask:false,
            selectIndex:99,
            status:2,
            dataArr:[]
          }
      },
      mounted(){
          this.initData();
      },
      methods:{
        showDialog(){
          this.showMask = !this.showMask
        },
        closeDialog(i){
          this.showMask = false;
          this.selectIndex = i;
          this.initData(i);
        },
        goSendPacketPage(){
          if(this.$fromApp(this)){
            this.$callJava({url:this.$webUrl+"MarketingActivities/SendRedPacket?from=app"})
          }else{
            this.$router.push('/MarketingActivities/SendRedPacket');
          }
        },
        initData(val=''){
          if(val == 99){val = ''};
          this.$ajax.get('activity/red_packet/template/list',res=>{
            // console.log(res);
            if(res.code == '200'){
              this.dataArr = res.data;
            }else{
              this.$vux.toast.text(res.msg, 'center');
            }
          },{state:val})
        }
      }
    }
</script>

<style lang="less" type="text/less" scoped>
  ul>li{
    list-style: none;
  }
  input{
    -webkit-appearance: none;
  }
  .showMaskStyle{
    z-index: 100000;
  }
  .redPacketListBody{
    .redPacketListTop{
      width: 100%;
    }
    .headRight{
      font-size: 16px;
      color: #FFFFFF;
      img{
        width: 0.3rem;
        height: 0.3rem;
        margin-bottom: -.04rem;
      }
    }
    .allStatus{
      height: .88rem;
      font-size: 16px;
      color: #333333;
      width: 100%;
      background-color: #ffffff;
      font-weight:bold;
      img{
        width: 8px;
        height: 8px;
        margin-bottom: 2px;
      }
    }
    .statusList{
      background-color: #ffffff;
    }
    .statusItem{
      width: 100%;
      height: 0.86rem;
      border-top: 1px solid #EBEBEB;
      span{
        margin-left: .3rem;
        font-size: 16px;
        color: #222222;
      }
      img{
        width: .3rem;
        height: .3rem;
        margin-right: .3rem;
      }
      .selectText{
        color: #527DD9;
      }
    }
    .redPacketList{
      margin-top: .2rem;
      .redPacketItem{
        width: 6.9rem;
        height: 2.4rem;
        border-radius: 16px;
        background-color: #ffffff;
        margin-bottom: 0.2rem;
        .redPacketContent{
          width: 5.5rem;
          padding-left: 10px;
          margin-top: 8px;
          p{
            font-size: 15px;
            font-weight: bold;
            color: #222222;
          }
          span{
            font-size: 13px;
            margin: 2px 0;
            color: #999999;
          }
        }
        .statusText{
          margin-top: 15px;
          font-size: 15px;
          font-weight: 500;
        }
      }
    }
    .mask{
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      opacity: 0;
      -webkit-transition: opacity 0.2s ease-in;
      transition: opacity 0.2s ease-in;
      background-color: #000;
      z-index: 999;
    }
  }
</style>
